<route lang="json5" type="page">
	{
	layout: 'default',
	style: {
	navigationBarTitleText: '密码修改',
	navigationStyle: 'custom',
	disableScroll: true, // 微信禁止页面滚动
	'app-plus': {
	bounce: 'none', // 禁用 iOS 弹性效果
	},
	},
	}
</route>

<template>
	<PageLayout navTitle="密码修改" backRouteName="people">
		<wd-form style="z-index: 999;" custom-class="pt3" ref="form" :model="model">
			<view class="change-info-box">
				<wd-cell-group border>
					<wd-input show-password hold-keyboard label="旧密码：" prop="oldPassword" clearable label-width="120px"
						v-model="model.oldPassword" placeholder="请输入旧密码" :rules="[{ validator: rules.oldPassword }]">
					</wd-input>
					<wd-input show-password label="新密码：" prop="password" clearable label-width="120px"
						v-model="model.password" placeholder="请输入新密码" />
					<wd-input show-password label="确认新密码：" prop="newPassword" clearable label-width="120px"
						v-model="model.newPassword" :rules="[{ validator: rules.newPassword }]" />
				</wd-cell-group>

				<view class="footer p5">
					<wd-button type="primary" size="large" @click="handleSubmit" block>确认</wd-button>
					<wd-button type="info" size="large" @click="handleCancel" block>取消</wd-button>
				</view>
			</view>
		</wd-form>
		<!-- <view class="change-password-container">
			<view class="password-box">
				<view class="password-input">
					<span class="label">旧密码：</span>
					<view class="input-container">
						<input ref="passwordInput" v-show="hidePassword" v-model="input" type="password"
							:password="true" />
						<input ref="textInput" v-show="!hidePassword" v-model="input" type="text" :password="false" />
						<view class="input-icon">
							<wd-icon @click="showPassword" v-if="hidePassword" name="eye-close" size="20px"></wd-icon>
							<wd-icon @click="showPassword" v-else name="view" size="20px"></wd-icon>
						</view>
					</view>
				</view>
				<passwordInput placeholder="请输入支付密码" v-model="payPassword" maxLength="6">
					<template #label>
						<text class="input-label">支付密码：</text>
					</template>
				</passwordInput>
			</view>
			<wd-button size="large" @click="handleSubmit" block>确认</wd-button>
			<wd-button size="large" @click="handleCancel" block type="info">取消</wd-button>
		</view> -->
	</PageLayout>
</template>

<script lang="ts" setup>
	import { ref, reactive, nextTick, onMounted } from 'vue'
	import { http } from '@/utils/http'
	import { useToast, useMessage, useNotify, dayjs } from 'wot-design-uni'
	import { useRouter } from '@/plugin/uni-mini-router'
	import { useUserStore } from '@/store/user'
	import { getFileAccessHttpUrl } from '@/common/uitls'
	import passwordInput from './components/passwordInput.vue';

	defineOptions({
		name: 'chatList',
		options: {
			styleIsolation: 'shared',
		},
	})
	const toast = useToast()
	const router = useRouter()
	const userStore = useUserStore()
	const model = reactive({
		oldPassword: '', // 旧密码
		password: '', // 新密码
		newPassword: '', // 确认新密码
	})
	const showPasswordFlag = ref(true)

	const rules = {
		oldPassword: (value) => {
			if (value?.trim()?.length) {
				return true
			} else {
				toast.warning('请输入旧密码')
				return false
			}
		},
		password: (value) => {
			if (value?.trim()?.length) {
				if (value === model.oldPassword) {
					toast.warning('新密码不能与旧密码相同')
					return false
				}
				return true
			} else {
				toast.warning('请输入新密码')
				return false
			}
		},
		newPassword: (value) => {
			if (value?.trim()?.length) {
				if (value === model.password) {
					return true
				} else {
					toast.warning('两次输入的新密码不一致')
					return false
				}
			} else {
				toast.warning('请确认新密码')
				return false
			}
		},
	}
	const form = ref()

	function showPassword(e) {
		console.log(e, "点击小眼睛");
	}

	function handleSubmit() {
		form.value
			.validate()
			.then(({ valid, errors }) => {
				if (valid) {
					// return
					uni.showModal({
						content: "确认修改密码吗？",
						confirmText: "确认",
						confirmColor: "#2fd4ae",
						success(res) {
							if (res.confirm) {
								submitChangePassword()
							}
						}
					})
				}
			})
			.catch((error) => {
				console.log(error, 'error')
			})
	}

	function submitChangePassword() {
		const data = { ...model, username: userStore.userInfo.username, phone: userStore.userInfo.phone }
		console.log(data, 'change-pawssword---------')
		uni.showLoading()
		http
			.get('/sys/user/passwordAppChange', { ...data })
			.then((res : any) => {
				uni.hideLoading()
				if (res.success) {
					toast.success('修改成功~')
					setTimeout(() => {
						router.replaceAll({ name: 'people' })
					}, 1000)
				} else {
					toast.warning(res.message)
				}
			})
			.catch(() => {
				toast.error('修改失败，服务器出错')
				uni.hideLoading()
			})
	}

	function handleCancel() {
		let canNavBack = getCurrentPages()
		if (canNavBack && canNavBack.length > 1) {
			uni.navigateBack()
		} else {
			history.back();
		}
	}
</script>

<style lang="scss" scoped>
	.change-password-container {
		width: 100%;
		height: 100%;
		box-sizing: border-box;
		padding: 10px;
		background-color: #FFF;
		display: flex;
		flex-direction: column;
		gap: 10px;
	}

	.password-box {
		box-sizing: border-box;
		border: 4upx solid #eff2f1;
		border-radius: 10px;
		width: 100%;
		box-sizing: border-box;
		height: 400px;
		padding: 10px 20px;
	}


	//
	:deep(.wd-cell-group) {
		box-sizing: border-box;
		border: 4upx solid #eff2f1;
		border-radius: 20upx;
		--wot-input-color: var(--color-grey);
		--wot-cell-value-color: var(--color-grey);
		background-color: transparent !important;
		--wot-cell-title-color: var(--UI-FG-0);

		.wd-input__label {
			--wot-cell-title-color: var(--UI-FG-0);
		}

		.wd-cell__left {
			color: var(--UI-FG-0);
		}

		.wd-select-picker__cell {
			--wot-cell-wrapper-padding: 14px;
		}

		.wd-select-picker {
			// margin: 15px 0;
		}

		.wd-cell-group__body {
			background-color: transparent;
		}
	}

	:deep(.wd-cell) {
		.wd-cell__wrapper {
			align-items: center;
		}

		.wd-cell__left {
			display: flex;
			align-items: center;
			width: 70px;
			flex: none;
		}

		.wd-cell__value {
			text-align: left;
		}
	}

	:deep(.pt3) {
		padding-top: 0;
		height: 100%;
	}

	:deep(.p5) {
		padding: 0;
		padding-top: 26upx;
	}

	.footer {
		display: flex;
		flex-direction: column;
		gap: 20upx;
	}

	.change-info-box {
		box-sizing: border-box;
		background-color: #FFF;
		padding: 26upx;
		height: 100%;
	}

	.phone {
		display: flex;
		align-items: center;
		background-color: #fff;

		.wd-input {
			flex: 1;
		}

		.box {
			margin-left: 10px;
			margin-right: 15px;
			display: flex;
			align-items: center;

			.num {
				color: #fff;
				background-color: var(--wot-color-theme);
				border-top-left-radius: 3px;
				border-bottom-left-radius: 3px;
				font-size: 12px;
				height: 24px;
				line-height: 24px;
				padding: 0 8px;
			}

			.text {
				position: relative;
				color: var(--wot-color-theme);
				font-size: 12px;
				height: 24px;
				line-height: 24px;
				padding: 0 8px;
				border-top-right-radius: 6px;
				border-bottom-right-radius: 6px;
				min-width: 70px;

				&::before {
					content: ' ';
					width: 200%;
					height: 200%;
					position: absolute;
					top: 0;
					left: 0;
					border: 1px solid currentColor;
					-webkit-transform: scale(0.5);
					transform: scale(0.5);
					-webkit-transform-origin: 0 0;
					transform-origin: 0 0;
					box-sizing: border-box;
					border-radius: inherit;
					z-index: 1;
					pointer-events: none;
				}
			}
		}
	}
</style>